
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@include file="parts/Header.jsp" %>

<html:html>
    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Application</title>

        <link href="styles/Styles/style.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
        <script>
            $(function() {
                $( "#datePicker" ).datepicker({
                    changeMonth: true,
                    changeYear: true
                });
            });
        </script>
        <style>
            #accordion-resizer {
                padding: 10px;
                width: auto;
                height: auto;
            }
        </style>
        <script>
            $(function() {
                $( "#accordion" ).accordion({
                    collapsible: true,
                    heightStyle: "content"
                    
                });
            });
            $(function() {
                $( "#accordion-resizer" ).resizable({
                    minHeight: 300,
                    minWidth: 500,
                    resize: function() {
                        $( "#accordion" ).accordion( "refresh" );
                    }
                });
            });
        </script>

        <script type="text/javascript">
            function manageComponents(){
                $('#ms').hide();
                $('#malitaryCell').hide();
                
                $('#childrenCell').hide();
                $('#m2').hide();
                
                $('#ni').hide();
                $('#ni2').hide();
            }
            
           
        </script>

        <script type="text/javascript">
            function select(){
                var gender=document.getElementById('gender').value;
            
             
                if(gender =='Male'){
                    $('#ms').show();
                    $('#malitaryCell').show();
                }
                if(gender =='Female'){
                    $('#ms').hide();
                    $('#malitaryCell').hide();
                }
            }
            
            function check(){
                var val= document.getElementById('marital').value;
                if(val == 'Single'){
                    $('#childrenCell').hide();
                    $('#m2').hide();
                }
                if(val == 'Married'){
                    $('#childrenCell').show();
                    $('#m2').show();
                }
                if(val == 'Widowed'){
                    $('#childrenCell').show();
                    $('#m2').show();
                }
            }
            
            function getco(){
                var v=document.getElementById('pob').value;
                if(v==67){
                    $('#ni').show();
                    $('#ni2').show();
                }
                else{
                    $('#ni').hide();
                    $('#ni2').hide();
                }
            }
            
        </script>
        <style>
            .ui-autocomplete-loading {
                background: white url('styles/images/ui-anim_basic_16x16.gif') right center no-repeat;
            }
            #city { width: 25em; }
        </style>
        <script>
            $(function() {

                $( "#cityz" ).autocomplete({
                    source: function( request, response ) {
                        $.ajax({
                            url: "http://ws.geonames.org/searchJSON",
                            dataType: "jsonp",
                            data: {
                                featureClass: "P",
                                style: "full",
                                maxRows: 12,
                                name_startsWith: request.term
                            },
                            success: function( data ) {
                                response( $.map( data.geonames, function( item ) {
                                    return {
                                        label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                                        value: item.name
                                    }
                                }));
                            }
                        });
                    },
                   
                    
                    open: function() {
                        $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
                    },
                    close: function() {
                            
                        $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
                    }
                });
            });
        </script>

        <style>
            #tabs_wrapper {
                width: 422px;

            }
            #tabs_container {
                border-bottom: 1px solid #ccc;
            }
            #tabs {
                list-style: none;
                padding: 5px 0 4px 0;
                margin: 0 0 0 10px;
                font: 1em arial;


            }
            #tabs li {
                display: inline;

            }
            #tabs li a {
                border: 1px solid #ccc;
                padding: 4px 6px;
                text-decoration: none;
                color: white;
                font-weight: bold;
                background-color: #005CA9;
                border-bottom: none;
                outline: none;
                border-radius: 5px 5px 0 0;
                -moz-border-radius: 5px 5px 0 0;
                -webkit-border-top-left-radius: 15px;
                -webkit-border-top-right-radius: 15px;
            }
            #tabs li a:hover {
                background-color: #dddddd;
                padding: 4px 6px;

            }
            #tabs li.active a {
                border-bottom: 1px solid #fff;
                background-color: #fff;
                padding: 4px 6px 5px 6px;
                border-bottom: none;
                color: #005CA9;
            }
            #tabs li.active a:hover {
                background-color: #eeeeee;
                padding: 4px 6px 5px 6px;
                border-bottom: none;
            }

            #tabs li a.icon_accept {            
                background-position: 5px;
                background-repeat: no-repeat;
                padding-left: 24px;
            }
            #tabs li a.icon_accept:hover {
                padding-left: 24px;
            }

            #tabs_content_container {
                border: 1px solid #ccc;
                border-top: none;
                padding: 10px;
                width: auto;
                height: auto;
            }
            .tab_content {
                display: none;
            }

        </style>
        <script>
            $(document).ready(function(){
                //  When user clicks on tab, this code will be executed
                $("#tabs li").click(function() {
                    //  First remove class "active" from currently active tab
                    $("#tabs li").removeClass('active');
 
                    //  Now add class "active" to the selected/clicked tab
                    $(this).addClass("active");
 
                    //  Hide all tab content
                    $(".tab_content").hide();
 
                    //  Here we get the href value of the selected tab
                    var selected_tab = $(this).find("a").attr("href");
                    
                    //  Show the selected tab content
                    $(selected_tab).fadeIn();
                   
                   
        
                   
                    //  At the end, we add return false so that the click on the link is not executed
                    return false;
                });
            });
        </script>

    </head>
    <body onload="resizePage();manageComponents()">
    <center>



        <div id="innerPageContainer" >
            <table style="width: 100%" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td class="firstList">About Us</td>
                    <td rowspan="3" id="innerPageCell" >
                        <ol>
                            <li>Fields with a (<span class="star">*</span>) are required before continuing.</li>
                            <li>Press Next to continue</li>
                            <li>You will receive a confirmation email from Globisoft.</li>
                        </ol>
                        <br/>


                        <div id="tabs_container">
                            <ul id="tabs">
                                <li class="active"><a href="#tab1">Personal Information</a></li>
                                <li><a class="icon_accept" href="#tab2">Contact Information</a></li>
                                <li><a href="#tab3">Education Information</a></li>
                            </ul>
                        </div>
                        <html:form action="/appact.do" enctype="multipart/form-data">
                            <div id="tabs_content_container">
                                <div id="tab1" class="tab_content" style="display: block;">
                                    <div>

                                        <html:hidden property="userId" value="${user.userId}"/>
                                        <table>
                                            <tr>
                                                <td  class="applicationTD" colspan="3">Gender <span class="star">*</span></td>
                                            </tr>
                                            <tr>

                                                <td colspan="3">
                                                    <html:select  styleId="gender"  onchange="select()"  property="gender" onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox"   style="width: 180pxheight: 23px;">

                                                        <html:option styleId="-1" value="-1" >Please Select One</html:option>
                                                        <html:option styleId="Male" value="Male">Male</html:option>
                                                        <html:option styleId="Female" value="Female">Female</html:option>
                                                    </html:select>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td style="height: 10px;" colspan="3"></td>
                                            </tr>

                                            <tr>
                                                <td  class="applicationTD" style="width: 210px; " >First name <span class="star">*</span></td>
                                                <td  class="applicationTD">Middle name <span class="star">*</span></td>
                                                <td  class="applicationTD" >
                                                    &nbsp;</td>
                                            </tr>

                                            <tr>
                                                <td style="width: 210px">
                                                    <html:text onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox"  property="firstName" style="width: 180px;" /></td>
                                                <td>
                                                    <html:text onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox"  property="middleName" style="width: 180px" /></td>
                                                <td >
                                                    &nbsp;</td>
                                            </tr>
                                            <tr>
                                                <td style="height: 10px;" colspan="3"></td>
                                            </tr>

                                            <tr>
                                                <td  class="applicationTD" style="width:210px;">Last name <span class="star">*</span></td>
                                                <td  class="applicationTD" style="width: 190px;">Date of birth <span class="star">*</span></td>
                                                <td  class="applicationTD" style="width: 30px;"></td>
                                            </tr>

                                            <tr>
                                                <td style="width: 210px">
                                                    <html:text onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox"  property="lastName"  style="width: 180px" />
                                                </td>
                                                <td>
                                                    <html:text styleId="datePicker"   onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox"  property="bd" style="width: 180px" />
                                                </td>
                                            </tr>
                                            <tr>
                                                <td  class="applicationTD" style="width: 210px ;">Place of birth <span class="star">*</span></td>
                                                <td name="malitaryCell" id="malitaryCell" >Military status <span class="star">*</span></td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td style="width: 210px">
                                                    <html:select styleId="pob" onchange="getco()"  onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox" property="placeOfBirth"  style="width: 180px">
                                                        <html:option value="-1" >Please Select One</html:option>
                                                        <logic:iterate name="AboutUsBean" property="country" id="country" >
                                                            <html:option styleId="${country.countryName}" value="${country.countryId}"><bean:write name="country" property="countryName"/></html:option>
                                                        </logic:iterate>
                                                    </html:select>
                                                </td>

                                                <td>
                                                    <html:select styleId="ms"  onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox" property="militaryStatus" style="width: 180px">
                                                        <html:option value="-1">Please Select One</html:option>
                                                        <html:option value="Finished">Finished</html:option>
                                                        <html:option value="Postponed">Postponed</html:option>
                                                        <html:option value="Exempted">Exempted</html:option>
                                                    </html:select>&nbsp;
                                                </td>
                                                <td ></td>

                                            </tr>

                                            <tr>
                                                <td style="height: 10px;" colspan="3"></td>
                                            </tr>
                                            <tr>
                                                <td class="applicationTD" style="width: 210px ;">Marital status <span class="star">*</span></td>
                                                <td id="childrenCell"  class="applicationTD">No. of children <span class="star">*</span></td>


                                            </tr>

                                            <tr>
                                                <td style="width: 210px ;">
                                                    <html:select styleId="marital" onclick="check()" onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox" property="maritalStatus" style="width: 180px" onchange="add_Application_Marital_Changed()">
                                                        <html:option value="-1">Please Select One</html:option>
                                                        <html:option styleId="Single" value="Single">Single</html:option>
                                                        <html:option styleId="Married" value="Married">Married</html:option>
                                                        <html:option styleId="Widowed" value="Widowed">Widowed</html:option>
                                                    </html:select>
                                                </td>

                                                <td>
                                                    <html:select styleId="m2"  onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox" property="children" style="width: 180px">
                                                        <html:option value="-1">Please Select One</html:option>

                                                        <c:forEach var="i" step="1" begin="0" end="9">
                                                            <html:option value="${i}"> ${i} </html:option>
                                                        </c:forEach>
                                                        <html:option value="+9">+9</html:option>
                                                    </html:select>
                                                </td>

                                            </tr>
                                            <tr style="width: 210px ;height: 5px"></tr>

                                            <tr>

                                                <td><div id="ni" style="font-size: 14px;height: 1px;font-family: sans-serif" >National ID</div><br/><html:text styleId="ni2" value="" onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox"  property="natid" style="width: 190px"/>
                                                </td> 
                                            </tr>
                                        </table>

                                    </div>

                                </div>
                                <div id="tab2" class="tab_content">

                                    <div>

                                        <table>
                                            <tr>
                                                <td class="applicationTD"  colspan="2">Current address line1 <span class="star">*</span></td>
                                            </tr>
                                            <tr>
                                                <td style=" height: 28px;" colspan="2">
                                                    <html:text  onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox"  property="add1" style="width: 400px;"/></td>
                                            </tr>
                                            <tr>
                                                <td style=" height: 10px;" colspan="2"></td>
                                            </tr>
                                            <tr>


                                                <td class="applicationTD" style="" colspan="2">Current address line2</td>
                                            </tr>

                                            <tr>
                                                <td style="" colspan="2">
                                                    <html:text onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox"  property="add2" style="width: 400px"/></td>
                                            </tr>
                                            <tr>
                                                <td style=" height: 10px;" colspan="2"></td>
                                            </tr>
                                            <tr>
                                                <td class="applicationTD"  style="width:  210px; ">Country <span class="star">*</span></td>
                                                <td class="applicationTD" style="">City <span class="star">*</span></td>
                                            </tr>
                                            <tr>
                                                <td style="width:  210px; ">
                                                    <script type="text/javascript"  src="country_city.js"></script>
                                                    <html:select  onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox" property="country"  style="width: 180px">
                                                        <html:option value="-1" >Please Select One</html:option>
                                                        <logic:iterate name="AboutUsBean" property="country" id="country" >
                                                            <html:option value="${country.countryName}"><bean:write name="country" property="countryName"/></html:option>
                                                        </logic:iterate>
                                                    </html:select>
                                                </td>
                                                <td id='city'>
                                                    <div class="ui-widget">

                                                        <html:text styleId="cityz" onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox"  property="city" style="width: 190px"/>
                                                    </div>

                                                </td>
                                            </tr>

                                            <tr>
                                                <td style=" height: 10px;" colspan="2"></td>
                                            </tr>


                                            <tr>
                                                <td class="applicationTD" colspan="2">Post/Zip code</td>
                                            </tr>

                                            <tr>
                                                <td colspan="2">
                                                    <html:text  onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox"  property="zipCode" style="width:  190px"/>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td style=" height: 10px;" colspan="2"></td>
                                            </tr>

                                            <tr>
                                                <td style="width: 210px">Phone <span class="star">*</span></td>
                                                <td class="applicationTD" style="height: 10px;">Mobile <span class="star">*</span></td>
                                            </tr>

                                            <tr>
                                                <td style="width: 210px">
                                                    <html:text  onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox"  property="phone" style="width:  190px" /></td>
                                                <td class="applicationTD" style="height: 10px;">
                                                    <html:text onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox"  property="mob" style="width:  190px" /></td>
                                            </tr>
                                        </table>
                                    </div>


                                </div>
                                <div id="tab3" class="tab_content">


                                    <div>

                                        <table>
                                            <tr>

                                                <td class="applicationTD" style="width: 210px">

                                                    Highest level of education <span class="star">*</span>

                                                </td>

                                                <td class="applicationTD" style="width: 210px">

                                                    Institute/University <span class="star">*</span>
                                                </td>

                                            </tr><tr>
                                                <td style="width: 210px;height: 10px;">

                                                    <html:select onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox" property="levOfEd" style="width: 190pxheight: 23px;">
                                                        <html:option value="-1">Please Select One</html:option>
                                                        <logic:iterate name="AboutUsBean" property="elevel" id="level">
                                                            <html:option value="${level.educationLevelId}"><bean:write name="level" property="educationLevelName"/></html:option>
                                                        </logic:iterate>
                                                    </html:select></td>
                                                <td style=" height: 10px; width: 210px;">
                                                    <html:select onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox" property="university" style="width: 190pxheight: 23px;">
                                                        <html:option value="-1">Please Select One</html:option>
                                                        <logic:iterate name="AboutUsBean" property="inst" id="inst">
                                                            <html:option value="${inst.instituteId}"><bean:write name='inst' property='instituteName'/></html:option>

                                                        </logic:iterate>
                                                    </html:select></td>
                                            </tr>
                                            <tr>
                                                <td style="height: 10px;" colspan="2"></td>
                                            </tr>

                                            <tr>
                                                <td class="applicationTD" style="width: 210px"  >

                                                    Grade&nbsp;<span class="star">*</span>

                                                </td>
                                                <td class="applicationTD" style="width: 210px" >

                                                    &nbsp;Graduation Year&nbsp;<span class="star">*</span>

                                                </td>

                                            </tr><tr>

                                                <td style=" height: 10px; width: 210px;">

                                                    <html:select onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox" property="grad" style="width: 190pxheight: 23px;">
                                                        <html:option value="-1">Please Select One</html:option>
                                                        <logic:iterate name="AboutUsBean" property="grades" id="g">
                                                            <html:option value="${g.gradeId}"><bean:write name="g" property="gradeName"/></html:option>
                                                        </logic:iterate>

                                                    </html:select>
                                                </td>
                                                <td class="applicationTD" style="width: 210px" >
                                                    <html:select onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox"  property="gradYear" style="width: 190px">


                                                        <html:option value="-1">Please Select One</html:option>

                                                        <c:forEach var="i" begin="1980" end="2012" step="1">
                                                            <html:option value="${i}">${i}</html:option>
                                                        </c:forEach>
                                                    </html:select></td>


                                            </tr>
                                            <tr><td style="height: 10px;" colspan="2"></td></tr>
                                            <tr>
                                                <td class="applicationTD" style="width: 210px"  >

                                                    &nbsp;Field of study&nbsp;<span class="star">*</span>

                                                </td>
                                                <td class="applicationTD" style="width: 210px">

                                                    Years of experience <span class="star">*</span>
                                                </td>
                                            </tr>

                                            <tr>

                                                <td class="applicationTD" style="width: 210px" >
                                                    <html:select onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox" property="fieldOfStudy" style="width: 190pxheight: 23px;" onchange="fieldChanged()">
                                                        <html:option value="-1">Please Select One</html:option>
                                                        <logic:iterate name="AboutUsBean" property="study" id="study">
                                                            <html:option value="${study.studyFieldId}"><bean:write name="study" property="studyFieldName"/></html:option>
                                                        </logic:iterate>

                                                    </html:select>
                                                </td>

                                                <td class="applicationTD" style="width: 210px">

                                                    <html:select onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox" property="yearsOfExp" style="width: 190px">
                                                        <html:option value="-1" >Please Select One</html:option>

                                                        <c:forEach var="i" begin="0" end="15" step="1">
                                                            <html:option value="${i}"> ${i} </html:option>
                                                        </c:forEach>
                                                        <html:option value="15+">15+</html:option>
                                                    </html:select>


                                                    <!--  display search result here -->  

                                                </td>
                                            </tr>

                                            <tr><td style="height: 10px;" colspan="2"></td></tr>


                                        </table>

                                        <table>
                                            <tr>

                                                <td colspan="2" class="applicationTD" >The last three jobs handled by you <span class="star"></span></td>

                                            </tr>
                                            <tr>
                                                <td colspan="2">
                                                    <table style="border: thin solid #175694;" cellpadding="2" cellspacing="2">

                                                        <tr>
                                                            <th  style="width: 202px;height: 20px;" class="dateStyle">Company Name</th>
                                                            <th  style="width: 202px;height: 20px;" class="dateStyle">Position </th>
                                                            <th  style="height: 20px;" class="dateStyle" colspan="2">From</th>
                                                            <th  style="height: 20px;" class="dateStyle" colspan="2"> To </th>
                                                        </tr>
                                                        <tr >
                                                            <td style="width: 202px;height: 34px;">
                                                                <html:text value=" " onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox"  property="compName1" style="width: 190px"/>
                                                            </td>
                                                            <td style="width: 202px;height: 34px;">
                                                                <html:text value=" "  onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox"  property="pos1"  style="width: 190px" />
                                                            </td>
                                                            <td style="width: 190px;height: 34px;">
                                                                <html:text value=" " styleId="datepicker1"  onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox"  property="from1"  style="width: 190px" />
                                                                <script>
                                                                    $(function() {
                                                                        $( "#datepicker1" ).datepicker({
                                                                            showButtonPanel: true
                                                                        });
                                                                    });
                                                                </script>
                                                            </td>
                                                            <td class="calendarStyle" style="height: 34px">

                                                            </td>
                                                            <td style="width: 200px;height: 34px;">
                                                                <html:text value=" " styleId="datepicker2"  onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox"  property="to1" style="width: 190px"/>
                                                                <script>
                                                                    $(function() {
                                                                        $( "#datepicker2" ).datepicker({
                                                                            showButtonPanel: true
                                                                        });
                                                                    });
                                                                </script>

                                                            </td>
                                                            <td class="calendarStyle" style="height: 34px">

                                                            </td>
                                                        </tr>
                                                        <tr>

                                                            <td style="width: 202px;height: 34px;">
                                                                <html:text  value=" " onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox"  property="compName2" style="width: 190px"/>
                                                            </td>
                                                            <td style="width: 202px;height: 34px;">
                                                                <html:text value=" " onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox"  property="pos2" style="width: 190px" />
                                                            </td>
                                                            <td style="width: 190px;height: 34px;">
                                                                <html:text value=" " styleId="datepicker3"  onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox"  property="from2" style="width: 190px"/>
                                                                <script>
                                                                    $(function() {
                                                                        $( "#datepicker3" ).datepicker({
                                                                            showButtonPanel: true
                                                                        });
                                                                    });
                                                                </script>
                                                            </td>
                                                            <td class="calendarStyle" style="height: 34px">

                                                            </td>
                                                            <td style="width: 200px;height: 34px;">
                                                                <html:text value=" " styleId="datepicker4" onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox"  property="to2" style="width: 190px"/>
                                                                <script>
                                                                    $(function() {
                                                                        $( "#datepicker4" ).datepicker({
                                                                            showButtonPanel: true
                                                                        });
                                                                    });
                                                                </script>
                                                            </td>
                                                            <td class="calendarStyle" style="height: 34px">

                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td style="width: 202px; height:34px;">
                                                                <html:text value=" " onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox"  property="compName3" style="width: 190px" />
                                                            </td>
                                                            <td style="width: 202px; height:34px;">
                                                                <html:text value=" " onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox" property="pos3" style="width: 190px"/>
                                                            </td>
                                                            <td style="width: 190px;height: 34px;">
                                                                <html:text value=" " styleId="datepicker5" onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox"  property="from3" style="width: 190px"/>
                                                                <script>
                                                                    $(function() {
                                                                        $( "#datepicker5" ).datepicker({
                                                                            showButtonPanel: true
                                                                        });
                                                                    });
                                                                </script>
                                                            </td>
                                                            <td class="calendarStyle" style="height: 34px">

                                                            </td>
                                                            <td style="width: 200px;height: 34px;">
                                                                <html:text value=" " styleId="datepicker6" onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox"  property="to3" style="width: 190px"/>
                                                                <script>
                                                                    $(function() {
                                                                        $( "#datepicker6" ).datepicker({
                                                                            showButtonPanel: true
                                                                        });
                                                                    });
                                                                </script>
                                                            </td>
                                                            <td class="calendarStyle" style="height: 34px">

                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2" style="height:10px; "></td>
                                            </tr>
                                            <tr>
                                                <td colspan="2">Career <span class="star">*</span></td>
                                            </tr>
                                            <tr>
                                                <td colspan="2" style="height:10px; ">
                                                    <html:select onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox" property="vacancyId" style="width: 190pxheight: 23px;">
                                                        <html:option value="-1" >Please Select One</html:option>

                                                        <logic:iterate name="AboutUsBean" property="vacancies" id="g">
                                                            <html:option value="${g.vacancyId}"><bean:write name="g" property="vacancyTitle"/></html:option>
                                                        </logic:iterate>

                                                    </html:select>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td colspan="2" style="height:10px; "></td>
                                            </tr>

                                            <tr>

                                                <td colspan="2" class="adminID">Your CV:</td>
                                            </tr>

                                            <tr>
                                                <td style="height: 10px;" colspan="2"></td>

                                            </tr>
                                            <tr>
                                                <td style="width:10px;height: 10px;"></td>
                                                <td class="applicationTD" style="height: 10px"  >
                                                    <div id="cvFileName" style="color: red"></div>
                                                </td>
                                            </tr>

                                            <tr>

                                                <td style="height: 30px; " colspan="2">


                                                    <html:file property="cvPath"/>

                                                </td>

                                                <td style="height: 30px">
                                                </td>



                                            </tr>

                                            <tr>
                                                <td colspan="3" style="height: 10px;">

                                                </td>
                                            </tr>



                                        </table>

                                    </div>

                                </div>
                            </div>
                            <html:submit  value='Submit Application' style="width: 220px" styleClass="addButton" onmouseout='buttonOut(this)' onmouseover='buttonOver(this)'/>

                        </html:form>


                        <!-- Validation Of Tabs -->







                    </td>
                </tr>

                <tr>
                    <td id="menuCell">
                        <ul class="nav">
                            <logic:iterate name="AboutUsBean"
                                           property="aboutUs" id="titles">
                                <logic:notEqual name="titles" property="showMenu"  value="null">

                                    <li><html:link  action="/contact.do" paramId="title" paramName="titles" paramProperty="aboutUsTerm" ><bean:write name="titles" property="aboutUsTerm"/></html:link></li>


                                </logic:notEqual>
                            </logic:iterate>

                        </ul>




                    </td>
                </tr>

                <tr>
                    <td class="lastList"></td>
                </tr>

                <tr>
                    <td colspan="2" class="footer">
                        <jsp:include page="parts/Footer.jsp"/>
                    </td>
                </tr>
            </table>

        </div>

    </center>
</body>
</html:html>

